<template>
	<view class="container">
		<view class="container">
			<!-- 顶部面板 -->
			<view class='slide box-c d-ai-c'>
				<view class="red-background">
				</view>
				<view class="card">
					<!-- 标题 -->
					<view class="box">
						<image :src="shopInfo.shopLogo" class="ml-4 shop-logo" style="" mode=""></image>
						<text class="shop-title" style="">{{shopInfo.shopName}}</text>
						<view class="phone-view">
							<view class="iconfont icondianhua phone" @tap="call">

							</view>
						</view>

					</view>
					<view class="box link">

					</view>
					<view class="box mt-1">
						<text class="iconfont icontime1 icon"></text>
						<text class="desc">
							{{shopInfo.workTime}}
						</text>

					</view>
					<view class="box">
						<text class="iconfont icon-location icon"></text>
						<text class="desc">
							{{shopInfo.city}} {{shopInfo.district}} {{shopInfo.address}}
						</text>
						<text class="iconfont iconqianjin">
						</text>

					</view>
				</view>
			<!-- 	<view class="box d-jc-sb attract d-ai-c ">
					<text class="m-1">该商家有2个志愿者岗位招募</text>
					<text class="m-1" @tap='look'>点击查看</text>
				</view> -->
			</view>
			<view class="page-section-spacing">
				<view class="scroll-view-item_H" v-for="(item,index) in tabList" @tap="changeTab(index)">
					<view class="animate__animated" hover-class="animate__rubberBand"
						:class="index == isActive ? 'active' :''">
						{{item.name}}
					</view>
					<view class="" :class="index == isActive ? 'line' :''"></view>
				</view>
			</view>
			<!-- 开设课程 -->
			<view class="scroll-panel" id="scroll-panel" v-if="this.isActive===0">
				<view class="list-box">
					<view class="left">
						<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
							:scroll-into-view="leftIntoView">
							<view class="item" v-for="(item,index) in list" :key="index"
								:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
								@tap="leftTap">{{item.classifyName}}</view>
						</scroll-view>
					</view>
					<view class="main">
						<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
							:scroll-into-view="scrollInto" scroll-with-animation="true">
							<view class="item main-item box-c" v-for="(item,index) in list" :key="index"
								:id="'item-'+index">
								<view class="title-class">
									<view>{{item.classifyName}}</view>
								</view>
								<view class="goods box d-jc-c" @tap='openInfo(data)' v-for="(data,index2) in item.data"
									:key="index2">
									<image :src="data.image" mode=""></image>
									<view class="box-c d-flex d-jc-sb">
										<view class="mb-3">
											<text class="class-title">{{data.className}}</text>
										</view>
										<view class="box d-ac-sb jb">
											<view class="teacher">
												<text class="iconfont iconlaoshi"></text>
												<text class="pl-1">{{data.teacherName}}老师</text>
											</view>
											<view class="font">
												<text>{{data.number
}}人已报名</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 关于我们 -->
			<view class="scroll-panel" style="background-color: #f8f8f8;" id="scroll-panel" v-if="this.isActive===1">
				<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
					:scroll-into-view="leftIntoView">
				<view class="panel1">
					<view class="panel1-l">
						<view class="iconfont iconjianjie jianjie"></view>
						<!-- <image src="../../static/images/shoplist/xxjj@2x.png" mode=""></image> -->
						<view>学校简介</view>
					</view>
					<view class="panel1-m">
						<scroll-view class="scroll-view_H bg_l" scroll-x="true" scroll-left="0"  >
							<view class="scroll-view-item_H1" v-for="(v,i) in shopInfo.synopsisImages">
								<image class="img":src="v" mode="">
								</image>
							</view>

						</scroll-view>
					</view>
					<view class="panel1-n">
						{{shopInfo.synopsisText}}
					</view>
				</view>
				<view class="panel2">
					<view class="panel2-l">
						<view class="iconfont iconliulanqi jianjie"></view>
						<!-- <image src="../../static/images/shoplist/wz@2x.png" mode=""></image> -->
						<view>学校网址：{{shopInfo.url}}</view>
					</view>
					<view class="panel2-m">
						<view class="iconfont iconyouxiang "></view>
						<!-- <image src="../../static/images/shoplist/xxyx@2x.png" mode=""></image> -->
						<view>学校邮箱：{{shopInfo.email}}</view>
					</view>
				</view>
				<view class="panel3">
					<view class="panel3-l">
						<view class="iconfont iconweixin2 weixin"></view>
						<!-- <image src="../../static/images/shoplist/gzh@2x.png" mode=""></image> -->
						<view>学校公众号</view>
					</view>
					<view class="panel3-m">
						<image :src="shopInfo.publicUrlLogo" mode=""></image>
						<view class="panel3-m-t">
							<view class="">
								{{shopInfo.publicUrl}}
							</view>
							<view class="">
								{{shopInfo.publicUrlText}}
							</view>
						</view>
					</view>
				</view>
				<view class="panel4">
					<view class="panel4-l">
						<view class="iconfont icontongzhi"></view>
						<!-- <image src="../../static/images/shoplist/xz@2x.png" mode=""></image> -->
						<view>报名须知</view>
					</view>
					<view class="panel4-m">
						{{shopInfo.reportRequire}}
					</view>
				</view>
				</scroll-view>
			</view>
			<!-- 领导班子 -->
			<view class="scroll-panel" style="background-color: #FFFFFF;" id="scroll-panel" v-if="this.isActive===2">
				<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
					:scroll-into-view="leftIntoView">
				<view class="leader">
					<view class="leader-l">
						<scroll-view class="scroll-view_H1" scroll-y="true" scroll-left="120"  >
							<view class="scroll-view-item_H2" v-for="(v,i) in shopInfo.leaderList">
								<image class="leaderimg" :src="v.leaderImage" mode=""></image>
								<view class="leadername">
									{{v.leaderName}}
								</view>
								<view class="leaderpo">
									{{v.position}}
								</view>
							</view>


						</scroll-view>
					</view>

				</view>
				</scroll-view>
			</view>
			<!-- 学校荣誉 -->
			<view class="scroll-panel" style="background-color: #FFFFFF;" id="scroll-panel" v-if="this.isActive===3">
				<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
					:scroll-into-view="leftIntoView">
				<view class="" style="margin-top: 1rpx;padding-bottom: 55rpx;">
					<view class="honst" v-for="(v,i) in shopInfo.honorList">
						<view class="honst-1">
							<view class="">

							</view>
							<view class="honorTime">
								{{v.honorTime}}
							</view>
						</view>
						<view class="honorText">
							{{v.honorText}}
						</view>
					</view>

				</view>
				</scroll-view>
			</view>
		</view>




	</view>

</template>

<script>
	export default {
		data() {
			return {
				flag: true,
				loading: true,
				scrollHeight: 0,
				scrollTopSize: 0,
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				windows_height: '',
				num: 1,
				element: [],
				activeIndex: 0,
				shopId: '',
				classifyId:'',
				shopInfo: {},
				isActive: 0,
				tabList: [{
					id: "1",
					name: '开设课程'
				}, {
					id: "2",
					name: '关于我们'
				}, {
					id: "3",
					name: '领导班子'
				}, {
					id: "4",
					name: '学校荣誉'
				}],
				list: [],
			}
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
			}
		},

		onLoad(option) {
			this.shopId = option.shopId
			this.classifyId = option.classifyId
			this.getProductListByclass()
		},
		mounted() {
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					})
				}, 200);
			})

		},
		onReady() {
			let _this = this
		},
		onShow() {
			this.getShopInfo()
		},
		methods: {
			//点击事件改变swiper
			changeTab(active) {
				this.isActive = active
				if (active == 0) {
					this.payState = ''
					console.log(this.isActive)
				} else if (active == 1) {
					this.payState = 1
				} else if (active == 2) {
					this.payState = 0
				} else if (active == 3) {
					this.payState = 9
				}
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.phone //仅为示例
				});
			},
			openInfo(data) {
				uni.navigateTo({
					url: 'product-activity-info?id=' + data.id
				})
			},
			look() {
				uni.showToast({
					title: '功能暂未开放！',
					duration: 1500,
					icon: "none"
				});
			},
			getProductListByclass() {
				this.$api.getClassOrActivityList({
					shopId: this.shopId
				}).then((res) => {
					console.log(res)
					this.list = res.data.dataMap
					this.getListData();

				})
			},
			//获取商家信息
			getShopInfo() {
				this.$api.getShopInfo({
					shopId: this.shopId,
					classifyId:this.classifyId
				}).then((res) => {
					if (res.statusCode == 200) {
						this.shopInfo = res.data.data
						// this.shopList = res.data.data
						// console.log(this.shopList)
						// if (this.shopList.length > 0) {
						// 	this.shopInfo = res.data.data.list[0]
						// 	console.log(this.shopInfo)

						// }
						uni.hideLoading()
					}
				})


			},


			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},
			/* 获取列表数据 */
			getListData() {
				// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
				this.$nextTick(() => {
					this.getElementTop();
				});
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then((res) => {
					let topArr = res.map((item) => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 0 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 0;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = (this.topArr.length - 1); i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if ((top + 2) >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = (index < 0 ? 0 : index);
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `item-${index}`;
			}
		}
	}
</script>

<style lang="scss">

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
		background: transparent;
	}
	.weixin{
		color: #FF5551;
		margin-left: 30rpx;
		font-size: 38rpx;
		// margin-top: 9rpx;
	}
	.jianjie{
		color: #FF5551;
		margin-left: 30rpx;
		font-size: 36rpx;
		}
	.honorText{
		margin-left: 61rpx;
		font-size: 26rpx;
		color: rgba(51, 51, 51, 1);
		margin-top: 7rpx;
		line-height: 40rpx;
	}
	.honorTime{
		margin-left: 10rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
	}
	.honst{
		margin-left: 13rpx;
	}
	.leadername{
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
	}
	.leaderpo{
		color: rgba(153, 153, 153, 1);
		font-size: 22rpx;
	}
	.leaderimg{
		width: 216rpx;
		height: 220rpx;
		border-radius: 8rpx;
	}
	.leader{
		margin-top: 20rpx;
		padding-bottom: 55rpx;
	}
	.leader-l{
		margin-left: 13rpx;
	}
	.panel4-m{
		color:rgba(102, 102, 102, 1);
		font-size: 28rpx;
		margin-left: 30rpx;
		line-height: 20px;
		padding-bottom: 60rpx;
	}
	.panel4-l>view:nth-child(2){
		margin-left: 18rpx;
		font-size: 30rpx;
	}
	.panel4-l>view:nth-child(1){
		color: #FF5551;
		margin-left: 30rpx;
		font-size: 36rpx;
		// margin-top: 10rpx;
	}
	.panel4-l{
		border-top: 1px solid #rgba(238, 238, 238, 1);
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
	}
	.panel3-m-t>view:nth-child(1){
		font-size: 28rpx;
		color:rgba(51, 51, 51, 1);
		font-weight: bold;
	}
	.panel3-m-t>view:nth-child(2){
		font-size: 24rpx;
		color:rgba(153, 153, 153, 1);
	}
	.panel3-m-t{
		margin-left: 18rpx;
		padding-bottom: 20rpx;
	}
	.panel3-m>image{
		margin-left: 30rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-top: -20rpx;
	}
	.panel3-m{
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		align-items: center;
	}
	.panel3-l>view:nth-child(2){
		margin-left: 18rpx;
		font-size: 30rpx;

	}
	.panel3-l{
		border-top: 1px solid #f8f8f8;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
	}
	.panel2-m>view:nth-child(1){
		color: #FF5551;
		margin-left: 30rpx;
		font-size: 30rpx;
		margin-top: -3rpx;
	}
	.panel2-m>view:nth-child(2){
		margin-left: 18rpx;
		font-size: 30rpx;
	}
	.panel2-m{
		border-top: 1px solid #f8f8f8;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
	}
	.panel2-l>view:nth-child(2){
		margin-left: 18rpx;
		font-size: 30rpx;
	}

	.panel2-l{
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
	}
	.panel1-n{
		margin: 0 auto;
		width: 688rpx;
		padding-bottom: 32rpx;
		color: #666666;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.img{
		width: 200rpx;
		height: 132rpx;
		border-radius: 8rpx;
	}
	.panel1-m{
		margin-left: 10rpx;
	}

	.panel1-l>view:nth-child(2){
		margin-left: 18rpx;
		font-size: 30rpx;
	}
	.panel1-l{
		 display: flex;
		 height: 80rpx;
		 line-height: 80rpx;
		 align-items: center;
	}
	.panel1{
		background-color: #FFFFFF;
		// border:1px solid red
	}
	.panel2,.panel3{
		margin-top:20rpx;
		background-color: #ffffff;
	}
	.panel4{
		padding-bottom: 16rpx;
		margin-top:20rpx ;
		background-color: #ffffff;
	}
	.jb{
		width: 340rpx;
		// border:1px solid red;
		display: flex;
		justify-items: center;
		justify-content: space-between;
	}
	.font{
		font-size: 22rpx;
		color: #999999;
		margin-top: 13rpx;

	}
	.honst{
		padding-bottom: 15rpx;
	}
	.honst-1{
		align-items: center;
		display: flex;
		margin-left: 30rpx;
	}
	.honst-1>view:nth-child(1){
		width: 16rpx;
		height: 16rpx;
		border: 4rpx solid #FF7E51;
		border-radius: 50%
	}
	.scroll-view_H{
		white-space: nowrap;
	}
	.scroll-view_H1{
		white-space: wrap;
	}
	.scroll-view-item_H>view {
		font-size: 26rpx;
		/* border: 1px solid red; */
		line-height: 80rpx;

	}

	.page-section-spacing {
		height: 88rpx;
		background-color: #FFFFFF;
		border-bottom: 3rpx solid #EEEEEE;
		// background-color: #f3f3f3;
		display: flex;
		justify-content: space-around;
	}

	.line {
		height: 6rpx;
		background-color: #FF5551;
		width: 50%;
		margin: auto;
		border-radius: 50rpx;
	}

	.line-gray {
		height: 1rpx;
		width: 660rpx;
		background-color: #f0f0f0;
		margin: auto;
		border-radius: 24rpx;
		z-index: 99;
	}

	.active {
		color: #a7a7a7;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 150rpx;
		height: 75rpx;
		text-align: center;
		font-size: 34rpx;
	}
	.scroll-view-item_H1 {
		display: inline-block;
		width: 200rpx;
		height: 132rpx;
		text-align: center;
		font-size: 34rpx;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}
	.scroll-view-item_H2 {
		display: inline-block;
		width: 220rpx;
		height: 342rpx;
		text-align: center;
		border: 2rpx solid #f8f8f8;
		margin-left: 17rpx;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}
	.class-title {
		font-weight: 600;
	}

	.peopel-num {
		position: absolute;
		right: 20rpx;
		color: #999;
		font-size: 22rpx;
		line-height: 50rpx;
	}

	.peopel-num text:last-child {
		color: #FF5551;
		font-weight: 600;
	}

	.teacher {
		color: #666;
		font-size: 26rpx;
	}

	.iconqianjin {
		position: absolute;
		right: 20rpx;
		font-size: 24rpx;
		color: #838383;
		bottom: 15rpx;
	}

	.icon {
		color: #FF5551;
		margin-left: 26rpx;
		margin-top: -5rpx;
	}

	.desc {
		margin-left: 14rpx;
		font-size: 26rpx !important;
		color: #000000 !important;
	}

	.link {
		margin: 0 auto;
		width: 300px;
		height: 2rpx;
		margin-top: 14rpx;
		background: #ebebeb;
	}

	.phone {
		border-radius: calc(50rpx);
		width: 74rpx;
		background: #FF5551;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		right: 30rpx;
		top: 30rpx;

	}

	.shop-title {
		font-size: 38rpx;
		font-weight: 600;
		margin-top: 40rpx;
		margin-left: 30rpx;
		color: #505050;

	}

	.shop-logo {
		border: #EEEEEE 1rpx solid;
		width: 140rpx;
		height: 140rpx;
		margin-left: 40rpx;
		margin-top: -40rpx;
		border-radius: 10rpx;


	}

	.attract {
		width: 700rpx;
		height: 80rpx;
		background-color: #463636;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;

	}

	.attract text {
		color: #FF7E51;

	}

	.attract text:last-child {
		padding: 0rpx 20rpx;
		border: #FF7E51 solid 2rpx;
		border-radius: 50rpx;
	}

	.card {
		width: 740rpx;
		height: 240rpx;
		background-color: #ffffff;
		z-index: 99;
		margin-top: 40rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		border-bottom-left-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
		position: relative;
	}

	.red-background {
		height: 150rpx;
		width: 100%;
		background-color: #FF5551;
		position: absolute;
	}

	.cart-2 {
		width: 200rpx;
		background-color: #D5B373;
		text-align: center;
		height: 100%;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;

		&>text {
			font-size: 42rpx;
			color: #fff;
		}
	}



	page,
	.container {
		height: 100%;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}


	}

	.bottom-panel {
		background-image: linear-gradient(to right, #E6E6E6, #f0f0f0, #FFFFFF, #FFFFFF, #FFFFFF);
		// height: 100rpx;
		z-index: 99;
	}

	.cart {
		width: 700rpx;
		background-color: rgba(42, 45, 50, 1);
		height: 110rpx;
		border-radius: 110rpx;
		z-index: 99;

	}

	.show {
		display: none;
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 28rpx;

		.left {
			width: 180rpx;
			background-color: #e6e6e6;
			line-height: 80rpx;
			box-sizing: border-box;
			font-size: 32rpx;

			.item {
				text-align: center;
				position: relative;
				padding: 20rpx 0;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						width: 600upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active {
					color: #FF5551;
					background-color: #fff;
					border-left: #FF5551 solid 4rpx;
					font-weight: 600;
				}
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;



			.title-class {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;
			}

			.item {
				padding-bottom: 10rpx;
				border-bottom: #eee solid 1px;
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 30rpx;


				&>image {
					width: 180rpx;
					height: 120rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

			}
		}
	}

	.number {
		width: 50rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.icon-jian1 {
		color: #000000;
		font-size: 40rpx;

	}

	.icon-jia1 {
		color: #D5B373;
		font-size: 38rpx;
	}

	.placeholder {
		height: 60rpx;
	}

	.class-title-view {
		top: 0rpx;
		line-height: 60rpx;
		font-size: 32rpx;
		font-weight: 600;
		position: sticky;
		height: 60rpx;
		background-color: #FFFFFF;
		width: 100%;
		z-index: 10;
	}

	.money text:first-child {
		font-size: 24rpx;
		color: #999999;

	}

	.money text:nth-child(2) {
		font-size: 36rpx;
		color: #3b3b3b;

	}

	.money text:nth-child(3) {
		font-size: 22rpx;
		color: #999999;

	}

	.desc {
		color: #999999;
		font-size: 22rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 600;
	}

	.text-heide-1 {
		width: 300rpx;
	}

	.product-image image {
		width: 220rpx;
		height: 160rpx;
		border-radius: 15rpx;

	}

	.border-radis {
		/*
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx; */
	}

	.classify {
		text-align: center;
	}



	.noAcitve {
		background-color: #e6e6e6;
		border-radius: 40rpx;
	}

	.noAcitve-between-top {}

	.noAcitve-between-buttom {
		border-top-right-radius: 20rpx;
	}

	.slide,
	.slide swiper {
		height: 300rpx;
		width: 750rpx;
		background-color: #e6e6e6;
	}


	.cart-view {
		height: 50px;
	}

	.content {
		height: 100%;
		background-color: #e6e6e6;
	}
</style>
